<template>
	<view class="wechat-contant">
		<template v-if="getMemberWechatLog.length>0">
			<view v-for="(i,index) in getMemberWechatLog" :key="index">
				<template v-if="i.has_head=='true'">
					<view v-if="i.mine==''">
						<view v-if="i.type==-1" class="tipsmsg">未知类型-暂无处理</view>
						<view v-else-if="i.type==-2" class="tipsmsg">{{i.text}}</view>
						<view v-else class="tipsmsg">{{i.text}}</view>
					</view>
					<view v-else class="time-line">{{i.text}}</view>
				</template>
				<template v-if="i.has_head=='false'">
					<template v-if="i.mine=='true'">
						<view v-if="i.type==15" class="tipsmsg">{{i.text}}</view>
						<view v-else class="message-item right-message-item">
							<view class="my-avatar">
								<!-- 视频语音 s -->
								<span v-if="i.type==7||i.type==6" class="my-avatar-range"><img class="my-avatar-range"
										src="http://yunke-pcfile.oss-cn-beijing.aliyuncs.com/wechat_img/default_head.png"></span>
								<span v-else class="my-avatar-range"><img class="my-avatar-range"
										:src="i.avatar"></span>
							</view>
							<view class="my-content">
								<view class="title">{{i.nickname}}{{i.timestamp}}</view>
								<view class="message-content">
									<view v-if="i.type==2" class="message-info-pic">
										<image class="message-pic"
											style="width: 100px; height: 200px; background-color: #eeeeee;"
											@click="showFullScreen(i.new_file)" :mode="i.mode" :src="i.new_file">
										</image>
									</view>

									<!-- 视频语音 s -->
									<view v-else-if="i.type==7||i.type==6" 　class="message-info">
										<view class="msg-text voice" v-if="i.new_file!=null"
											@click="playVoice(i,index)">
											<uni-icons type="sound-filled" size="30" class="music-icon"
												v-show="i.musicShow">
											</uni-icons>
											<uni-icons type="sound" class="music-icon" size="30" v-show="!i.musicShow">
											</uni-icons>语音播放
										</view>
										<view v-else>视频语音故障</view>
									</view>
									<!-- 地图 -->
									<view v-else-if="i.type==14" class="message-info">
										<view class="map-title">{{i.text}}地址</view>
										<map style="width: 280px; height: 300px;" :latitude="i.file.split(',')[0]"
											:longitude="i.file.split(',')[1]">
										</map>
									</view>
									<!-- 语音 -->
									<view v-else-if="i.type==3" class="message-info">
										<view class="msg-text voice" v-if="i.new_file!=null"
											@click="playVoice(i,index)">语音播放
											<uni-icons type="sound-filled" size="30" class="left-music-icon"
												v-show="i.musicShow">
											</uni-icons>
											<uni-icons type="sound" class="left-music-icon" size="30"
												v-show="!i.musicShow">
											</uni-icons>
										</view>
										<view v-else>视频语音故障</view>
									</view>
									<!-- 视频 -->
									<view v-else-if="i.type==4" class="message-info">
										<video id="media" class="media" controls :src="i.new_file"></video>
									</view>
									<!-- 聊天GIF动图 -->
									<view v-else-if="i.type==8" class="message-info">
										<img class="my-avatar-range" :src="i.new_file">
									</view>
									<!-- 下载 -->
									<view v-else-if="i.type==9" class="message-info">
										<view class="download-box">
											<view class="download-name">{{i.text}}</view>
											<view class="download-icon">
												<uni-icons type="wallet" size="20"></uni-icons>
											</view>
											<view class="download-icon">
												<a :href="i.new_file">
													<uni-icons type="arrow-down" size="20"></uni-icons>
												</a>
											</view>
										</view>
									</view>
									<!-- 点击外链 -->
									<view v-else-if="i.type==10" class="message-info">
										<view class="link-box">
											<a class="link-text" :href="i.new_file">{{i.text}}</a>
											<view class="link-img"><img src="@/static/wechat/down.png" /></view>
										</view>
									</view>
									<view v-else-if="i.type==13" class="message-info">
										<view class="chat-card">
											<view class="chat-card-list">
												<view class="chat-img"><img class="my-avatar-range" :src="i.new_file">
												</view>
												<view class="chat-text">{{i.text}}</view>
											</view>
											<view class="card">个人名片</view>
										</view>
									</view>
									<view v-else-if="i.type==18" class="message-info">
										<view class="miniprogram-header">{{i.text}}</view>
										<view class="miniprogram-img-thumb"><img class="my-avatar-range"
												:src="i.new_file"></view>
										<view class="miniprogram-footer">
											<view class="miniprogram-icon"> <img src="@/static/wechat/link.png" />
											</view>
											<view>小程序</view>
										</view>
									</view>
									<view v-else class="message-info" v-html="i.text.replace(/\n/gm, '<br>')">
									</view>

								</view>
							</view>
						</view>
					</template>
					<template v-if="i.mine=='false'">
						<!-- 以上是打招呼的内容 -->
						<view v-if="i.type==15" class="tipsmsg">{{i.text}}</view>
						<view v-else class=" message-item left-message-item">
							<view class="my-avatar">
								<!-- 视频语音 s -->
								<span v-if="i.type==7||i.type==6" class="my-avatar-range"><img class="my-avatar-range"
										src="http://yunke-pcfile.oss-cn-beijing.aliyuncs.com/wechat_img/default_head.png"></span>
								<span v-else class="my-avatar-range"><img class="my-avatar-range"
										:src="i.avatar"></span>
							</view>
							<view class="my-content">
								<view class="title">{{i.nickname}}{{i.timestamp}}</view>
								<view class="message-content">
									<view v-if="i.type==2" class="message-info-pic">
										<image class="message-pic"
											style="width: 100px; height: 200px; background-color: #eeeeee;"
											@click="showFullScreen(i.new_file)" :mode="i.mode" :src="i.new_file">
										</image>
									</view>
									<!-- 视频语音 s -->
									<view v-else-if="i.type==7||i.type==6" 　class="message-info">
										<view class="msg-text voice" v-if="i.new_file!=null"
											@click="playVoice(i,index)">
											<uni-icons type="sound-filled" size="30" class="music-icon"
												v-show="i.musicShow">
											</uni-icons>
											<uni-icons type="sound" class="music-icon" size="30" v-show="!i.musicShow">
											</uni-icons>语音播放
										</view>
										<view v-else>视频语音故障</view>
									</view>
									<!-- 地图 -->
									<view v-else-if="i.type==14" class="message-info">
										<view class="map-title">{{i.text}}地址</view>
										<map style="width: 280px; height: 300px;" :latitude="i.file.split(',')[0]"
											:longitude="i.file.split(',')[1]">
										</map>
									</view>
									<!-- 语音 -->
									<view v-else-if="i.type==3" class="message-info">
										<view class="msg-text voice" v-if="i.new_file!=null"
											@click="playVoice(i,index)">
											<uni-icons type="sound-filled" size="30" class="music-icon"
												v-show="i.musicShow">
											</uni-icons>
											<uni-icons type="sound" class="music-icon" size="30" v-show="!i.musicShow">
											</uni-icons>语音播放
										</view>
										<view v-else>视频语音故障</view>
									</view>
									<!-- 视频 -->
									<view v-else-if=" i.type==4" class="message-info">
										<video id="media" class="media" controls :src="i.new_file"></video>
									</view>
									<!-- 聊天GIF动图 -->
									<view v-else-if="i.type==8" class="message-info">
										<img class="my-avatar-range" :src="i.new_file">
									</view>
									<!-- 下载 -->
									<view v-else-if="i.type==9" class="message-info">
										<view class="download-box">
											<view class="download-name">{{i.text}}</view>
											<view class="download-icon">
												<uni-icons type="wallet" size="20"></uni-icons>
											</view>
											<view class="download-icon">
												<a :href="i.new_file">
													<uni-icons type="arrow-down" size="20"></uni-icons>
												</a>
											</view>
										</view>
									</view>
									<!-- 点击外链 -->
									<view v-else-if="i.type==10" class="message-info">
										<view class="link-box">
											<a class="link-text" :href="i.new_file">{{i.text}}</a>
											<view class="link-img"><img src="@/static/wechat/down.png" /></view>
										</view>
									</view>
									<view v-else-if="i.type==13" class="message-info">
										<view class="chat-card">
											<view class="chat-card-list">
												<view class="chat-img"><img class="my-avatar-range" :src="i.new_file">
												</view>
												<view class="chat-text">{{i.text}}</view>
											</view>
											<view class="card">个人名片</view>
										</view>
									</view>
									<view v-else-if="i.type==18" class="message-info">
										<view class="miniprogram-header">{{i.text}}</view>
										<view class="miniprogram-img-thumb"><img class="my-avatar-range"
												:src="i.new_file"></view>
										<view class="miniprogram-footer">
											<view class="miniprogram-icon"> <img src="@/static/wechat/link.png" />
											</view>
											<view>小程序</view>
										</view>
									</view>
									<view v-else class="message-info" v-html="i.text.replace(/\n/gm, '<br>')">
									</view>

								</view>
							</view>
						</view>
					</template>
				</template>
			</view>
		</template>
		<view v-else class="nextPage">没有记录</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	//音频播放
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		props: {
			parent: {},
			getMemberWechatLog: {
				type: [Array, Object],
				required: true
			}
		},
		data() {
			return {
				isShow: true,
				musicShow: true
			}

		},
		onLoad() {},
		methods: {
			//音频播放
			playVoice(e, index) {
				if (e.musicShow == true) {
					innerAudioContext.src = e.new_file;
					innerAudioContext.volume = 1
					innerAudioContext.play();
					e.musicShow = false;
					console.log('暂停')
				} else if (e.musicShow == false) {
					console.log('播放')
					innerAudioContext.stop()
					e.musicShow = true

				}

			},
			showFullScreen(e) {
				uni.previewImage({
					urls: [e]
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.wechat-contant {
		position: relative;
		padding: 20px;
		overflow: hidden;
		overflow-y: auto;
		height: calc(100vh - 140px);
		background-color: #f3f3f3;

		.time-line {
			text-align: center;
			font-size: 12px;
			color: #1a1a1ab3;
		}

		.message-item {
			display: flex;
			flex-direction: row;
			max-width: 100%;
			padding: 10px 0;
			position: relative;

			.my-avatar {
				width: 44px;
				margin-right: 10px;
			}

			.my-avatar-range {
				width: 44px;
				height: 44px;
				line-height: 44px;
				font-size: 18px;
				border-radius: 8px;
			}

			.my-content {
				.title {
					font-size: 12px;
					padding-bottom: 5px;
				}

				.message-content {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;

					.message-info {
						display: inline-block;
						text-align: left;
						padding: 10px;
						background: #ffffff;
						border-radius: 3px;
						position: relative;
						word-break: break-all;
						font-size: 12px;

						.voice {
							display: inline-block;
							vertical-align: middle;

							.music-icon {
								vertical-align: -6px;
							}

							.left-music-icon {
								transform: rotate(-180deg);
								display: inline-block;
								vertical-align: -6px;
							}

						}

						&:after {
							border: 5px solid transparent;
							border-right-color: #fff;
							width: 0;
							height: 0;
							position: absolute;
							content: " ";
							left: -10px;
							top: 10px;
						}

						.media {
							width: 230px;
						}

						.mediayy {
							width: 230px;
							height: 50px;

							.uni-video-container {
								background-color: grey !important;
							}
						}

						.aud {}
					}

					.message-info-pic {
						box-sizing: border-box;
						margin: 0;
						padding: 0;
						color: #000000d9;
						font-size: 14px;
						font-variant: tabular-nums;
						line-height: 1.5715;
						list-style: none;
						font-feature-settings: "tnum";
						position: relative;
						display: inline-block;
						line-height: 1;

						.message-pic {
							display: block;
							width: 100%;
							height: auto;
							max-width: 300px;
							display: inline-block;
							justify-content: flex-start;
							width: 53px;
						}
					}

					.message-info-audio {
						background: white;
					}

					.download-box {
						display: flex;

						.download-name {
							flex: 1;
							line-height: 50px;
						}

						.download-icon {
							width: 50px;
							font-size: 25px;
							margin-left: 10px;
							line-height: 50px;
							color: chocolate;

							.el-icon-download {
								color: #409eff;
								cursor: pointer;
							}
						}
					}

					.chat-card {
						width: 240px;
					}

					.chat-card-list {
						display: flex;
						flex-direction: row;
						align-items: center;
						border-bottom: 1px solid rgba(26, 26, 26, 0.05);
						padding: 0 0 10px;

						.chat-img {
							width: 44px;
							height: 44px;
							overflow: hidden;
							border-radius: 3px;
							margin-right: 10px;
						}

						.chat-text {
							flex: 1;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}

					.card {
						padding: 10px 0 0;
						font-size: 12px;
					}

					.link-box {
						display: flex;
						flex-direction: row;
						position: relative;
						align-items: center;
						text-align: left;
						cursor: pointer;
						width: 300px;

						.link-text {
							flex: 1;
							font-size: 14px;
							padding-right: 10px;
							color: #606266;
						}

						.link-img {
							width: 44px;
						}
					}

					.miniprogram-header {
						color: #1a1a1a;
						text-align: left;
						font-size: 14px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.miniprogram-img-thumb {
						max-width: 200px;
						padding: 10px 0;
						border-bottom: 1px solid rgba(26, 26, 26, 0.05);

						.my-avatar-range {
							max-width: 100% !important;
						}
					}

					.miniprogram-footer {
						display: flex;
						color: #1a1a1a;
						flex-direction: row;
						align-items: center;
						padding: 8px 0 0;
						font-size: 14px;

						.miniprogram-icon {
							margin-right: 8px;

							img {
								width: 20px;
								height: 20px;
								display: block;
								overflow: hidden;
							}
						}
					}

					.my-avatar-range {
						width: 300px;
						display: inline-block;
						justify-content: flex-start;
						width: 100%;
						height: auto;
					}

					.map-title {
						font-size: 14px;
						padding: 12px 0;
					}
				}
			}
		}

		.right-message-item {
			flex-direction: row-reverse;
			text-align: right;

			.my-avatar {
				margin-right: 0;
			}

			.my-content {
				margin-right: 10px;

				.message-content {
					justify-content: flex-end;

					.message-info {
						position: relative;
						background-color: #217af966;

						&:after {
							border: 5px solid transparent;
							border-left-color: #217af966;
							width: 0;
							height: 0;
							position: absolute;
							content: " ";
							right: -10px;
							left: auto;
							top: 10px;
						}
					}
				}
			}
		}

		.tipsmsg {
			max-width: 100%;
			padding: 10px 0;
			position: relative;
			font-size: 12px;
			text-align: center;
			width: 100%;
			color: #b2b2b2;
		}

	}

	.nextPage {
		max-width: 100%;
		padding: 10px 0;
		position: fixed;
		font-size: 12px;
		text-align: center;
		width: 100%;
		color: #000000d9;
		cursor: pointer;
		top: 40px;
		left: 0;
		right: 0;
		z-index: 9;

	}
</style>
